<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01.css">
</head>

<body>
    <!-- 块级元素独自占一行，所以最后设置 -->
    <!-- 区别于圣杯布局，这里的内容区域（即中间区域）并未采用浮动 -->
    <!-- 所有样式如下,layout只是方便隔开不同样式，具体应用时可以删除 -->
    <header>header</header>
    <!-- 双列--左固定，右自适应 -->
    <!-- 需要考虑书写顺序 left ==> right -->
    <div class="layout layout1">
        <div class="left">左固定</div>
        <div class="right">右自适应</div>
    </div>
    <!-- 双列--左自适应，右固定 -->
    <!-- 需要考虑书写顺序 right ==> left -->
    <div class="layout layout2">
        <div class="right">右固定</div>
        <div class="left">左自适应</div>
    </div>
    <!-- 三列--左固定，中间自适应，右固定 -->
    <!-- 书写顺序 left,right ==> center -->
    <div class="layout layout3">
        <div class="left">左固定</div>
        <div class="right">右固定</div>
        <div class="center">中间自适应</div>
    </div>
    <!-- 三列--左固定，中间固定，右自适应 -->
    <!-- 书写顺序 left ==> center ==> right -->
    <div class="layout layout4">
        <div class="left">左固定</div>
        <div class="center">中间固定</div>
        <div class="right">右自适应</div>
    </div>
    <!-- 三列--左自适应，中间固定，右固定 -->
    <!-- 书写顺序 right ==> center ==> left -->
    <div class="layout layout5">
        <div class="right">右固定</div>
        <div class="center">中间固定</div>
        <div class="left">左自适应</div>
    </div>
    <footer>footer123</footer>
</body>

</html>